<!--
 * @Author: wangshuguang
 * @Date: 2022-01-06 19:33:02
 * @LastEditTime: 2022-02-16 16:22:36
 * @LastEditors: wangshuguang
 * @Description: 可添加列表
-->
<template>
  <div class="addListContent">
    <!-- 添加按钮 -->
    <el-button v-if="showAddBtn" type="primary" size="small" :disabled="disabled" icon="el-icon-plus" circle @click="addHandleClick" />
    <div class="tableList">
      <div v-for="(item,index) of value" :key="index" class="tableListItem">
        <div class="tableListItem_head" />
        <div class="tableListItem_content">
          <slot :item="{item,index}" />
        </div>
        <div class="tableListItem_foot">
          <!-- 删除按钮 -->
          <el-button v-if="showDelBtn" type="danger" size="small" icon="el-icon-delete" :disabled="disabled" circle @click="delLine(index)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showAddBtn: {
      type: Boolean,
      default: true
    },
    showDelBtn: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: Boolean,
    // 添加回调函数
    addFun: Function,
    value: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    delLine(index) {
      const arr = [...this.value]
      arr.splice(index, 1)
      this.$emit('input', arr)
    },
    addLine(obj = {}) {
      this.$emit('input', [...this.value, obj])
    },
    addHandleClick() {
      if (this.addFun) {
        this.addFun(this.addLine)
      } else {
        this.addLine()
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.addListContent{
  .tableList{
    .tableListItem{
      display: flex;
      align-content: center;
      .tableListItem_content{
        flex: 1;
      }
    }
  }
}
</style>
